<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>仿豆瓣首页</title>
	<link rel="stylesheet" href="./css.css" />
	<link rel="shortcut icon" href="images/douban.ico" />
	<script type="text/javascript">
		window.onload = function () {
			var qrcode = document.getElementById("hd-download-code");
			var downloadApp = document.getElementById("hd-download-app");

			qrcode.onmouseover = function () {
				downloadApp.style.display = "block";
				downloadApp.style.zIndex = 100;
			};
			qrcode.onmouseout = function () {
				downloadApp.style.display = "none";
			};
			downloadApp.onmouseover = function (){
				downloadApp.style.display = "block";
				downloadApp.style.zIndex = 100;
			};
			downloadApp.onmouseout = function () {
				downloadApp.style.display = "none";
			};
		};
	</script>
</head>
<body>
	<!-- 顶部 -->
	<div id="hd-header">
		<a href="" class="header-logo"></a>
		<form action="">
			<input type="text" class="header-search" value="书籍、电影、音乐、小组、小站、成员"/>
			<p></p>
		</form>
		<ul>
			<li><a href="" class="header-book"></a></li>
			<li><a href="" class="header-movie"></a></li>
			<li><a href="" class="header-music"></a></li>
			<li><a href="" class="header-group"></a></li>
			<li><a href="" class="header-local"></a></li>
			<li><a href="" class="header-fm"></a></li>
			<li><a href="" class="header-time"></a></li>
			<li><a href="" class="header-fair"></a></li>
		</ul>
	</div>
	<!-- 顶部结束 -->

	<!-- 注册区域 -->
	<div id="hd-reg-background">
		<div id="hd-reg">
			<div id="hd-download">
				<h1 id="hd-download-title">豆瓣</h1>
				<span>4.0</span>
				<p id="hd-download-tit">我们的精神角落</p>
				<input id="hd-download-btn" type="button" value="下载豆瓣 App">
				<span id="hd-download-code"></span>
				<div id="hd-download-app">
					<img id="qrcode" src="images/doubanapp_qrcode.png" alt="">
					<p>iOS / Android 扫码直接下载</p>
				</div>
			</div>
			<div id="hd-right">
				<form action="">
					<input type="text" class="reg-username"  placeholder="邮箱/手机号" />
					<input type="text" class="reg-password" placeholder="密码"/>
					<a href="" class="reg-login">登录豆瓣</a>
					<a href="" class="reg-register">注册帐号</a>
					<p class="hd-right-p">
						<input type="checkbox" class="reg-rember"/>
						<span>记住我</span>
					<img id="login-wb" src="images/wechat.png" alt="微信登录" title="微信登录" >
					<img id="login-wx" src="images/weibo.png" alt="微博登录" title="微博登录">
					</p>
				</form>
			</div>

			
		</div>
	</div>
	<!-- 注册区域结束 -->


	<!-- 内容区域 -->
	<div id="hd-con">
		<div class="con-left">
			<h2 class="title">热点内容  · · · · · · </h2>
			<ul>
				<li>
					<a href="" class="con-left-pic"><img src="./images/p1728984586.jpg" alt="" /></a>
					<a href="">瞎饼</a>
					<span>149张照片</span>
				</li>
				<li>
					<a href="" class="con-left-pic"><img src="images/p442708830.jpg" alt="" /></a>
					<a href="">食物拍摄</a>
					<span>28张照片</span>
				</li>
				<li>
					<a href="" class="con-left-pic"><img src="images/p742239064.jpg" alt="" /></a>
					<a href="">【食物的家】</a>
					<span>61张照片</span>
				</li>
				<li>
					<a href="" class="con-left-pic"><img src="images/p1580889401.jpg" alt="" /></a>
					<a href="">Landscape(sketch) </a>
					<span>57张照片</span>
				</li>
			</ul>
		</div>
		<div class="con-mid">
			<ul>
				<li>
					<a href="">过气的大侠</a>
					<h2>喵咪戴戒指的日记 </h2>
					<p>01 封小刀只是想要一个拥抱。 下山的时候，封小刀问师傅，能不能抱一下？师傅摆摆...</p>
				</li>
				<li>
					<a href="">“25岁以前喝醉摔倒被男人抱起来。30岁的自己站起来”｜女人应该惧怕 30 岁到来吗？</a>
				</li>
				<li>
					<a href="">June Favourites & Empties|六月爱用品和第二季度空瓶记</a>
				</li>
				<li>
					<a href="">作为一个爹，曹操难道是神经病吗？</a>
				</li>
				<li>
					<a href="">且喝一碗豆浆去</a>
				</li>
				<li>
					<a href="">宇宙最坑编辑：无偿画1万张彩图你会生气吗？</a>
				</li>
				<li>
					<a href="">人生何处不相逢</a>
				</li>
				<li>
					<a href="">上海 | 我吃过最治愈的夜宵，都在这里了</a>
				</li>
				<li>
					<a href="">如何自己制作一个奢侈品级别的卡包</a>
				</li>
				<li>
					<a href="">鸦片的前世今生，与一个帝国的末路悲歌</a>
				</li>
			</ul>
		</div>
		<div class="con-right right">
			<h2 class="title right-title">
				热门话题  · · · · · ·  <span>( <a href="">去话题广场</a> )</span>
			</h2>
			<ul class="Topic-square-ul">
				<li style="margin-bottom: 10px;">
					<p><a href="">我的港乐情怀</a><b style="margin-left:10px;color: #00B51D;">[新]</b></p>
					<span>香港回归20周年 </span>
					<b>· 1791人参与</b>
				</li>
				<li>
					<p><a href="">2017已过一半</a><b style="margin-left:10px;color: #00B51D">[新]</b></p>
					<span>年初计划完成了多少？ </span>
					<b>· 2544人参与</b>
				</li>
				<li>
					<p><a href="">2017新年计划</a><b style="margin-left:10px;color: #FFAD32">[新]</b></p>
					<span>请不要害怕打脸 </span>
					<b>· 5082人参与</b>
				</li>
				<li>
					<p><a href="">豆瓣上结识的线下好友</a></p>
					<span>分享你们的友情历程 </span>
					<b>· 1414人参与</b>
				</li>
				<li>
					<p><a href="">杨德昌十年祭</a></p>
					<span>爱与希望之梦不死</span>
					<b>· 1702人参与</b>
				</li>
				<li>
					<p><a href="">高考志愿怎么填</a></p>
					<span>人生无法回头，未来依然可选</span>
					<b>· 3821人参与</b>
				</li>
			</ul>

		</div>
	</div>
	<!-- 内容区域结束 -->

	<!-- 时间区域 -->
	<div id="hd-time-background">

	  <div id="hd-time">
			<div class="left">
				<a href="" class="left-title">豆瓣时间</a>
			</div>
			<div class="mid">
				<h2 class="title">
					热门专栏  · · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul class="hd-time-list">
					<li>
						<a href=""></a>
						<a href="">邪典电影本纪</a>
						<span>图文专栏</span>
					</li>
					<li>
						<a href=""></a>
						<a href="">白先勇细说红楼梦</a>
						<span>音频专栏</span>
					</li>
					<li>
						<a href=""></a>
						<a href="">拍张好照片·跟七七学生活摄影</a>
						<span>图文专栏</span>
					</li>
					<li>
						<a href=""></a>
						<a href="">歌词时光 · 姚谦写词课</a>
						<span>音频专栏</span>
					</li>
					<li>
						<a href=""></a>
						<a href="">古今：杨照史记百讲</a>
						<span>音频专栏</span>
					</li>
					<li>
						<a href=""></a>
						<a href="">以乐语教国子——叶嘉莹古诗词吟诵课</a>
						<span>音频专栏</span>
					</li>
					<li>
						<a href=""></a>
						<a href="">人性皆有裂隙 • 理解人格的52堂心理课</a>
						<span>音频专栏</span>
					</li>
					<li>
						<a href=""></a>
						<a href="">醒来——北岛和朋友们的诗歌课</a>
						<span>音频专栏</span>
					</li>
				</ul>
			</div>
  	</div>

	</div>
	<!-- 时间区域结束 -->


	<!-- 视频区域 -->
	<div id="hd-video">
			<div class="left">
				<a href="" class="left-title">视频</a>
			</div>
		<div class="mid">
			<h2 class="title">
				如是 · · · · ·
			</h2>
			<ul class="hd-video-list">
				<li>
					<a href=""></a>
					<a href="">冯仑：看自己，我只看透一半</a>
				</li>
				<li>
					<a href=""></a>
					<a href="">《如是》第四期预告｜冯仑: 除了投胎外，剩下就是创业能改变命运</a>
				</li>
				<li>
					<a href=""></a>
					<a href="">白先勇：我为什么写悲剧</a>
				</li>
			</ul>

			<h2 class="title title1">
				瓣嘴 · · · · ·
			</h2>
			<ul class="hd-video-list1">
				<li>
					<a href=""></a>
					<a href="">《瓣嘴2》第11期 | Man出宇宙的硬汉胡军，也被毒评欺负惨了</a>
				</li>
				<li>
					<a href=""></a>
					<a href="">《瓣嘴2》第10期 | 高冷禁欲的老干部霍建华，表情真的不超过五个手指？</a>
				</li>
				<li>
					<a href=""></a>
					<a href="">《瓣嘴2》第9期 | 郭京飞这个磨人的小妖精，永远帅不过三秒就怂了</a>
				</li>
			</ul>
		</div>
	</div>
	
	<!-- 视频区域结束 -->

	<!-- 电影区域 -->
	<div id="hd-movie-background">
		<div id="hd-movie">
			<div class="left">
				<a href="" class="left-title">电影</a>
				<ul class="left-up">
					<li><a href="">影讯&购票</a></li>
					<li><a href="">选电影</a><img style="left:5px;top:-5px;position: relative;" src="images/new_menu.gif" alt=""></li>
					<li><a href="">电视剧</a></li>
					<li><a href="">排行榜</a></li>
					<li><a href="">分类</a></li>
					<li><a href="">影评</a></li>
					<li><a href="">预告片</a></li>
					<li><a href="">问答</a></li>
				</ul>
				<ul class="left-down">
					<li>
						<a href="" class="left-down-pic movie-pic"></a>
						<a href="" class="left-down-des">豆瓣电影</a>
					</li>
				</ul>
			</div>
			<div class="mid">
				<h2 class="title">
				正在热映  · · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul class="hd-movie-list">
					<li>
						<a href=""><img src="images/p2153376390.jpg" alt="" /></a>
					  <p class="hd-movie-name"><a href="">斯大林格勒</a></p>
						<span class="hd-movie-point">6.1</span>
						<a href="" class="movie-choose">选购订票</a>
					</li>
					<li>
						<a href=""><img src="images/p2156476151.jpg" alt="" /></a>
					  <p class="hd-movie-name"><a href="">精灵旅社</a></p>
						<span class="hd-movie-point">6.1</span>
						<a href="" class="movie-choose">选购订票</a>
					</li>
					<li>
						<a href=""><img src="images/p2155198242.jpg" alt="" /></a>
					  <p class="hd-movie-name"><a href="">猎仇者</a></p>
						<span class="hd-movie-point">6.1</span>
						<a href="" class="movie-choose">选购订票</a>
					</li>
					<li>
						<a href=""><img src="images/p2153758345.jpg" alt="" /></a>
					  <p class="hd-movie-name"><a href="">铁血娇娃</a></p>
						<span class="hd-movie-point">6.1</span>
						<a href="" class="movie-choose">选购订票</a>
					</li>
					<li>
						<a href=""><img src="images/p2155072056.jpg" alt="" /></a>
					  <p class="hd-movie-name"><a href="">我为相亲狂</a></p>
						<span class="hd-movie-point">6.1</span>
						<a href="" class="movie-choose">选购订票</a>
					</li>
					<li>
						<a href=""><img src="./images/p2151837713.jpg" alt="" /></a>
						<p class="hd-movie-name"><a href="">冲锋战警</a></p>
						<span class="hd-movie-point">6.1</span>
						<a href="" class="movie-choose">选购订票</a>
					</li>
					<li>
						<a href=""><img src="images/p2156152549.jpg" alt="" /></a>
					  <p class="hd-movie-name"><a href="">金刚狼2</a></p>
						<span class="hd-movie-point">6.1</span>
						<a href="" class="movie-choose">选购订票</a>
					</li>
				</ul>
			</div>
			<div class="right">
				<h2 class="title right-title">
				影片分类  · · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul class="movie-right-ul">
					<li><a href="">爱情</a></li>
					<li><a href="">喜剧</a></li>
					<li><a href="">剧情</a></li>
					<li><a href="">动画</a></li>
					<li><a href="">科幻</a></li>
					<li><a href="">动作</a></li>
					<li><a href="">经典</a></li>
					<li><a href="">悬疑</a></li>
					<li><a href="">青春</a></li>
					<li><a href="">犯罪</a></li>
					<li><a href="">惊悚</a></li>
					<li><a href="">文艺</a></li>
					<li><a href="">搞笑</a></li>
					<li><a href="">纪录片</a></li>
					<li><a href="">励志</a></li>
					<li><a href="">恐怖</a></li>
					<li><a href="">战争</a></li>
					<li><a href="">黑色幽默</a></li>
					<li><a href="">日本</a></li>
					<li><a href="">香港</a></li>
					<li><a href="">英国</a></li>
					<li><a href="">中国</a></li>
					<li><a href="">韩国</a></li>
					<li><a href="">法国</a></li>
					<li><a href="">台湾</a></li>
					<li><a href="">中国大陆</a></li>
					<li><a href="">德国</a></li>

				</ul>
				<h2 class="title right-title">
				近期热门  · · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul class="movie-right-down">
					<li>1.<a href="">卑鄙的我2</a></li>
					<li>2.<a href="">宠物</a></li>
					<li>3.<a href="">爱在午夜降临前</a></li>
					<li>4.<a href="">青春派</a></li>
					<li>5.<a href="">玩具总动员之惊魂夜</a></li>
					<li>6.<a href="">入学考试</a></li>
					<li>7.<a href="">异星觉醒</a></li>
					<li>8.<a href="">贝尔科实验</a></li>
					<li>9.<a href="">生化危机：复仇</a></li>
					<li>10.<a href="">奇迹，那天如此重要</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 电影区域结束 -->

	<!-- 小组区域 -->
	<div id="hd-group">
		<div class="left">
			<a href="" class="left-title music-title-a">小组</a>
			<ul class="left-up">
				<li><a href="">精选</a></li>
				<li><a href="">文化</a></li>
				<li><a href="">行摄</a></li>
				<li><a href="">娱乐</a></li>
				<li><a href="">时尚</a></li>
				<li><a href="">生活</a></li>
				<li><a href="">科技</a></li>
			</ul>
			<ul class="left-down">
				<li>
					<a href="" class="left-down-pic group-lit"></a>
					<a href="" class="left-down-des">豆瓣小组</a>
				</li>
			</ul>
		</div>
		<div class="mid">
			<h2 class="title">
				热门小组· · · · ·   <span>( <a href="">更多</a> )</span>
			</h2>
			<ul class="group-mid-ul">
				<li>
					<a href="" class="group-pic"><img src="images/g289842-3.jpg" alt="" /></a>
					<a href="" class="group-title">◎变态学英语交流小组◎</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g187430-36.jpg" alt="" /></a>
					<a href="" class="group-title">“女权”是权利的权！然后呢？</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g24620-3.jpg" alt="" /></a>
					<a href="" class="group-title">伊藤润二</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g62930-1.jpg" alt="" /></a>
					<a href="" class="group-title">讨厌男生长指甲</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g273410-4.jpg" alt="" /></a>
					<a href="" class="group-title">谜斗篷计划</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g49415-18.jpg" alt="" /></a>
					<a href="" class="group-title">詭異的自然</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g298341-1.jpg" alt="" /></a>
					<a href="" class="group-title">◎变态学英语交流小组◎</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g142992-3.jpg" alt="" /></a>
					<a href="" class="group-title">陪妳渡过大姨妈（MC Help）</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g62993-7.jpg" alt="" /></a>
					<a href="" class="group-title">笑点很奇怪</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g51009-3.jpg" alt="" /></a>
					<a href="" class="group-title">我念高三了</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g16365-5.jpg" alt="" /></a>
					<a href="" class="group-title">不信你没个什么癖！</a>
					<span>69002 个成员 </span>
				</li>
				<li>
					<a href="" class="group-pic"><img src="images/g50177-1.jpg" alt="" /></a>
					<a href="" class="group-title">英剧！英剧！</a>
					<span>69002 个成员 </span>
				</li>
			</ul>
		</div>
		<div class="right">
			<h2 class="title right-title">
				小组分类 · · · ·
			</h2>
			<ul class="group-right-ul">
				<li>
					<a href="" class="right-ul-title">兴趣»</a>
					<p>
						<a href="">旅行</a>
						<a href="">摄影</a>
						<a href="">影视</a>
						<a href="">音乐</a>
						<a href="">文学</a>
						<a href="">游戏</a>
						<a href="">动漫</a>
						<a href="">运动</a>
						<a href="">戏曲</a>
						<a href="">桌游</a>
						<a href="">怪癖</a>
					</p>
				</li>
				<li>
					<a href="" class="right-ul-title">生活»</a>
					<p>
						<a href="">健康</a>
						<a href="">美食</a>
						<a href="">宠物</a>
						<a href="">美容</a>
						<a href="">化妆</a>
						<a href="">护肤</a>
						<a href="">服饰</a>
						<a href="">公益</a>
						<a href="">家庭</a>
						<a href="">育儿</a>
						<a href="">汽车</a>
					</p>
				</li>
				<li>
					<a href="" class="right-ul-title">购物»</a>
					<p>
						<a href="">淘宝</a>
						<a href="">二手</a>
						<a href="">团购</a>
						<a href="">数码</a>
						<a href="">品牌</a>
						<a href="">文具</a>
					</p>
				</li>
				<li>
					<a href="" class="right-ul-title">学术»</a>
					<p>
						<a href="">人文</a>
						<a href="">社科</a>
						<a href="">自然</a>
						<a href="">建筑</a>
						<a href="">国学</a>
						<a href="">语言</a>
						<a href="">宗教</a>
						<a href="">哲学</a>
						<a href="">软件</a>
						<a href="">旅行</a>
						<a href="">硬件</a>
						<a href="">互联网</a>
					</p>
				</li>
			</ul>
		</div>
	</div>
	<!-- 小组区域结束 -->

	<!-- 读书区域 -->
	<div id="hd-book-background">
	<div id="hd-book">
		<div class="left">
				<a href="" class="left-title">读书</a>
				<ul class="left-up">
					<li><a href="">分类浏览</a></li>
					<li class="book-new"><a href="">阅读</a><img src="./images/new_menu.gif" alt="" /></li>
					<li><a href="">作者</a></li>
					<li><a href="">书评</a></li>
					<li><a href="">购书单</a></li>
				</ul>
				<ul class="left-down">
					<li>
						<a href="" class="left-down-pic book-read"></a>
						<a href="" class="left-down-des">豆瓣阅读</a>
					</li>
					<li>
						<a href="" class="left-down-pic book-write"></a>
						<a href="" class="left-down-des">豆瓣笔记</a>
					</li>
					<li>
						<a href="" class="left-down-pic book-buy"></a>
						<a href="" class="left-down-des">豆瓣购书</a>
					</li>
				</ul>
			</div>
			<div class="mid">
				<h2 class="title">
				新书速递  · · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul>
					<li>
						<a href=""><img src="images/475730.jpg" alt="" /></a>
					  <p><a href="">高城堡里的人</a></p>
						<span>〔美〕菲利普·...</span>
						<a href="" class="book-free-read">免费试读</a>
					</li>
					<li>
						<a href=""><img src="images/1962909.png" alt="" /></a>
					  <p><a href="">有限与无限的游...</a></p>
						<span>〔美〕菲利普·...</span>
						<a href="" class="book-free-read">免费试读</a>
					</li>
					<li>
						<a href=""><img src="images/1962364.png" alt="" /></a>
					  <p><a href="">大繁荣</a></p>
						<span>〔美〕菲利普·...</span>
						<a href="" class="book-free-read">免费试读</a>
					</li>
					<li>
						<a href=""><img src="images/1690362.jpg" alt="" /></a>
					  <p><a href=""> 没有梦想，何必...</a></p>
						<span>〔美〕菲利普·...</span>
						<a href="" class="book-free-read">免费试读</a>
					</li>
				</ul>
				<h2 class="title book-num">
				原创数字作品 · · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul class="book-num-ul">
					<li>
						<a href="" class="book-num-pic"><img src="images/1899221.jpg" alt="" /></a>
					  <p><a href="">美国童话</a></p>
						<span>〔英〕珀西·比希·雪莱</span>
						<b>12.00元</b>
						<a href="" class="book-free-read">免费试读</a>
					</li>
					<li>
						<a href="" class="book-num-pic"><img src="images/1829611.jpg" alt="" /></a>
					  <p><a href="">五日谈</a></p>
						<span>〔英〕珀西·比希·雪莱</span>
						<b>12.00元</b>
						<a href="" class="book-free-read">免费试读</a>
					</li>
					<li>
						<a href="" class="book-num-pic"><img src="images/1829269.jpg" alt="" /></a>
					  <p><a href=""> 佛，到底讲了些...</a></p>
						<span>〔英〕珀西·比希·雪莱</span>
						<b>12.00元</b>
						<a href="" class="book-free-read">免费试读</a>
					</li>
					<li>
						<a href="" class="book-num-pic"><img src="./images/80526.jpg" alt="" /></a>
						<p><a href="">美好百科 On...</a></p>
						<span>〔英〕珀西·比希·雪莱</span>
						<b>12.00元</b>
						<a href="" class="book-free-read">免费试读</a>
					</li>
				</ul>
			</div>
			<div class="right">
				<h2 class="title right-title">
				热门标签 · · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul>
					<li>
						<span>[文学]</span>
						<a href="">小说</a>
						<a href="">随笔</a>
						<a href="">散文</a>
						<a href="">日本文学</a>
						<a href="">童话</a>
						<a href="">诗歌</a>
						<a href="">名著</a>
						<a href="">港台</a>
						<a href="">更多</a>
					</li>
					<li>
						<span>[流行]</span>
						<a href="">漫画</a>
						<a href="">绘本</a>
						<a href="">推理</a>
						<a href="">青春</a>
						<a href="">言情</a>
						<a href="">科幻</a>
						<a href="">武侠小说</a>
						<a href="">奇幻</a>
						<a href="">更多</a>
					</li>
					<li>
						<span>[文化]</span>
						<a href="">历史</a>
						<a href="">哲学</a>
						<a href="">传记</a>
						<a href="">设计</a>
						<a href="">建筑</a>
						<a href="">电影</a>
						<a href="">回忆录</a>
						<a href="">音乐</a>
						<a href="">更多</a>
					</li>
				</ul>
			</div>
	</div>
	</div>
	<!-- 读书区域结束 -->

	<!-- 音乐区域 -->
	<div id="hd-music-background">
		<div id="hd-music">
			<div class="left">
				<a href="" class="left-title music-title-a">音乐</a>
				<ul class="left-up">
					<li><a href="">音乐人</a></li>
					<li><a href="">潮潮豆瓣音乐周</a></li>
					<li><a href="">金羊毛计划</a></li>
					<li><a href="">专题</a></li>
					<li><a href="">排行榜</a></li>
					<li><a href="">分类浏览</a></li>
					<li><a href="">乐评</a></li>
					<li><a href="">豆瓣FM</a></li>
					<li><a href="">歌单</a></li>
					<li><a href="">阿比鹿音乐奖</a></li>
				</ul>
				<ul class="left-down">
					<li>
						<a href="" class="left-down-pic music-fm"></a>
						<a href="" class="left-down-des">豆瓣FM</a>
					</li>
					<li>
						<a href="" class="left-down-pic music-people"></a>
						<a href="" class="left-down-des">豆瓣音乐人</a>
					</li>
				</ul>
			</div>
			<div class="mid">
				<h2 class="title music-title">
				豆瓣新碟榜 · · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul id="hd-music-up">
					<li>
						<a href=""><img src="images/s27081296.jpg" alt="" /></a>
					  <p>1.<a href="">殃金咒</a></p>
						<p><a href="">顶楼的马戏团</a></p>
						<b>8.6</b>
					</li>
					<li>
						<a href=""><img src="images/s27057077.jpg" alt="" /></a>
					  <p>2<a href=""> 我的小清新</a></p>
						<p><a href="">顶楼的马戏团</a></p>
						<b>8.6</b>
					</li>
					<li>
						<a href=""><img src="images/s27092740.jpg" alt="" /></a>
					  <p>3.<a href="">Graceland</a></p>
						<p><a href="">顶楼的马戏团</a></p>
						<b>8.6</b>
					</li>
					<li>
						<a href=""><img src="./images/s27066103.jpg" alt="" /></a>
						<p>4.<a href="">谈钞票伤感情 谈感情</a></p>
						<p><a href="">顶楼的马戏团</a></p>
						<b>8.6</b>
					</li>
					<li>
						<a href=""><img src="images/s27085316.jpg" alt="" /></a>
					  <p>5.<a href="">PRISM</a></p>
						<p><a href="">顶楼的马戏团</a></p>
						<b>8.6</b>
					</li>
					<li>
						<a href=""><img src="images/s26965442.jpg" alt="" /></a>
					  <p>6.<a href="">Moon Landing</a></p>
						<p><a href="">顶楼的马戏团</a></p>
						<b>8.6</b>
					</li>
					<li>
						<a href=""><img src="images/s27048190.jpg" alt="" /></a>
					  <p>7.<a href="">五月の蠅 / ラストバージン</a></p>
						<p><a href="">顶楼的马戏团</a></p>
						<b>8.6</b>
					</li>
					<li>
						<a href=""><img src="images/s27063338.jpg" alt="" /></a>
					  <p>8.<a href=""> LOVE【DVD付初回生産限定盤】</a></p>
						<p><a href="">顶楼的马戏团</a></p>
						<b>8.6</b>
					</li>
				</ul>
				<div style="clear:both;height: 0;"></div>
				<h2 class="title music-title1">
					热门歌单 · · · · · ·<span>( <a href="">更多</a> )</span>
				</h2>
				<ul id="hd-music-down">
					<li>
						<div><a href=""><img src="images/m1.png" alt=""></a></div>
						<div><p>那些 没有唱给你听的情歌</p></div>
					</li>
					<li>
						<div><a href=""><img src="images/m2.png" alt=""></a></div>
						<div><p>那些 没有唱给你听的情歌</p></div>
					</li>
					<li>
						<div><a href=""><img src="images/m3.png" alt=""></a></div>
						<div><p>那些 没有唱给你听的情歌</p></div>
					</li>
					<li>
						<div><a href=""><img src="images/m4.png" alt=""></a></div>
						<div><p>那些 没有唱给你听的情歌</p></div>
					</li>
					<li>
						<div><a href=""><img src="images/m5.png" alt=""></a></div>
						<div><p>那些 没有唱给你听的情歌</p></div>
					</li>
					<li>
						<div><a href=""><img src="images/m6.png" alt=""></a></div>
						<div><p>那些 没有唱给你听的情歌</p></div>
					</li>
				</ul>
			</div>
			<div style="clear: both;height: 0;"></div>
			<div class="right">
				<h2 class="title right-title">
				本周流行音乐人.... <span>( <a href="">更多</a> )</span>
				</h2>
				<ul class="music-right-ul">
					<li>
						<em>1.</em>
						<a href=""><img src="./images/8fc736add65e135.jpg" alt="" /></a>
						<a href="" class="music-right-name">边远</a>
						<p>流派: 说唱 Rap </p>
						<b>93574人关注 </b>
					</li>
					<li>
						<em>2.</em>
						<a href=""><img src="./images/50fc2407e067c71.jpg" alt="" /></a>
						<a href="" class="music-right-name">养鸡</a>
						<p>流派: 说唱 Rap </p>
						<b>3743人关注 </b>
					</li>
					<li>
						<em>3.</em>
						<a href=""><img src="./images/46151e682929d3e.jpg" alt="" /></a>
						<a href="" class="music-right-name">岳璇</a>
						<p>流派: 说唱 Rap </p>
						<b>2574人关注 </b>
					</li>
					<li>
						<em>4.</em>
						<a href=""><img src="./images/46151e682929d3e.jpg" alt="" /></a>
						<a href="" class="music-right-name">岳璇</a>
						<p>流派: 说唱 Rap </p>
						<b>2574人关注 </b>
					</li>
					<li>
						<em>5.</em>
						<a href=""><img src="./images/46151e682929d3e.jpg" alt="" /></a>
						<a href="" class="music-right-name">岳璇</a>
						<p>流派: 说唱 Rap </p>
						<b>2574人关注 </b>
					</li>
				</ul>
			</div>
		</div>
		<div style="clear: both;height: 0;"></div>
	</div>
	<!-- 音乐区域结束 -->

	<!-- 市集区域 -->
	<div id="hd-fair-background">
		<div id="hd-fair">
			<div class="left">
				<a href="" class="left-title ">市集</a>
				<ul class="left-up">
					<li><a href="">美食</a></li>
					<li><a href="">服饰</a></li>
					<li><a href="">配饰</a></li>
					<li><a href="">包袋</a></li>
					<li><a href="">鞋靴</a></li>
					<li><a href="">美容护肤</a></li>
					<li><a href="">家居生活</a></li>
				</ul>
				</div>
			<div class="mid">
					<h2 class="title">热门商品· · · · · · <span>( <a href="">更多</a> )</span>
					</h2>
					<ul class="hd-fair-list">
						<li>
							<a href=""><img src="images/f1.png" alt=""></a>
							<a href="" title="桌面置物架"> 桌面置物架 <span>88.00</span></a>
						</li>
						<li>
							<a href=""><img src="images/f2.png" alt=""></a>
							<a href="" title="桌面置物架"> 十四行诗 原味台湾手工黑糖茶... <span>43.00</span></a>
						</li>
					</ul>
					<ul class="hd-fair-list1">
						<li>
							<a href=""><img src="images/f3.png" alt=""></a>
							<a href="" title="木马逐风Mazur“三茶六味”牛轧糖礼盒">木马逐风Mazur...</a>
						</li>
						<li>
							<a href=""><img src="images/f4.png" alt=""></a>
							<a href="" title="多功能U型枕 贴心护颈枕">多功能U型枕...</a>
						</li>
						<li>
							<a href=""><img src="images/f5.png" alt=""></a>
							<a href="" title="PISN 秋冬羊毛混纺不掉毛超软短款套头加粗长袖毛衣针">PISN 秋冬羊毛...</a>
						</li>
						<li>
							<a href=""><img src="images/f6.png" alt=""></a>
							<a href="" title="良朴商务中筒男女袜">良朴商务中筒...</a>
						</li>
					</ul>
					<ul class="hd-fair-list1">
						<li>
							<a href=""><img src="images/f7.png" alt=""></a>
							<a href="" title="桌面置物架">桌面置物架...</a>
						</li>
						<li>
							<a href=""><img src="images/f8.png" alt=""></a>
							<a href="" title="十四行诗 原味台湾手工黑糖茶 红糖姜茶姜母茶生姜冲绳工艺 黑糖原味">十四行诗 原味...</a>
						</li>
						<li>
							<a href=""><img src="images/f9.png" alt=""></a>
							<a href="" title="木马逐风Mazur“三茶六味”牛轧糖礼盒">木马逐风Mazur...</a>
						</li>
						<li>
							<a href=""><img src="images/f10.png" alt=""></a>
							<a href="" title="多功能U型枕 贴心">多功能U型枕...</a>
						</li>
					</ul>
			</div>
			<div style="clear: both;height: 0;"></div>
			<div class="right">
				<h2 class="title right-title">
					热门店铺 · · · · · <span>( <a href="">更多</a> )</span>
				</h2>
				<ul class="fair-right-ul">
					<li>
						<a href=""><img src="images/d1.png" alt="" /></a>
						<div>
						<a href="" class="fair-right-name">ERICD官方旗舰店</a>
						<p>ERICD原创设计以传统服装制作工艺为主导，结合当下最流行的...</p>
						</div>
					</li>
					<li>
						<a href=""><img src="images/d2.png" alt="" /></a>
						<div>
						<a href="" class="fair-right-name">PISN</a>
						<p>每周五定时上新，注意关注偶</p>
						</div>
					</li>
					<li>
						<a href=""><img src="images/d3.png" alt="" /></a>
						<div>
						<a href="" class="fair-right-name">Nanaz 家居百货</a>
						<p>不用装修，NaNaZ home 也能你家变得更美一些。</p>
						</div>
					</li>
					<li>
						<a href=""><img src="images/d4.png" alt="" /></a>
			      <div>
						<a href="" class="fair-right-name">黄小姐</a>
						<p>卖我会穿的打底，做你会爱的姑娘</p>
						</div>
					</li>
				</ul>
			</div>
		</div>

	</div>

	<!-- 市集区域结束 -->


	<!-- 同城区域 -->
	<div id="hd-local-background">
		<div id="hd-local">
			<div class="left">
				<a href="" class="left-title local-big-a">同城</a>
				<ul class="left-up">
					<li><a href="">近期活动</a></li>
					<li><a href="">主办方</a></li>
					<li><a href="">舞台剧</a></li>
					<li><a href="">2016舞台剧榜单</a></li>
				</ul>
				<ul class="left-down">
					<li>
						<a href="" class="left-down-pic local-a"></a>
						<a href="" class="left-down-des">豆瓣同城</a>
					</li>
				</ul>
			</div>
			<div class="mid">
				<h2 class="title">
					福州 · 本周热门活动· · · · ·   <span>( <a href="">更多</a> )</span>
				</h2>
				<ul class="local-mid-ul">
					<li>
						<a href="" class="local-mid-pic"><img src="images/d5518b419927b90.jpg" alt="" /></a>
						<div>
							<a href="" class="local-mid-title">“与26所法国高与26所法国高与26所法国高” <span>正在售票</span></a>
							<p>11月2日 周六 - 11月3日 周日朝阳区天辰东路7号 北京国..</p>
							<p>266人关注</p>
						</div>
						
					</li>
					<li>
						<a href="" class="local-mid-pic"><img src="images/983709d555bcbc7.jpg" alt="" /></a>
						<div>
							<a href="" class="local-mid-title">【95折购票】果陀剧场 经典侦探喜剧《步步惊笑》</a>
							<p>11月2日 周六 - 11月3日 周日朝阳区天辰东路7号 北京国..</p>
							<p>266人关注</p>
						</div>
						
					</li>
					<li>
						<a href="" class="local-mid-pic"><img src="images/8670db9649f34cf.jpg" alt="" /></a>
						<div>
							<a href="" class="local-mid-title">“与26所法国高” <span>正在售票</span></a>
							<p>11月2日 周六 - 11月3日 周日朝阳区天辰东路7号 北京国..</p>
							<p>266人关注</p>
						</div>
						
					</li>
					<li>
						<a href="" class="local-mid-pic"><img src="images/2623653071f7212.jpg" alt="" /></a>
						<div>
							<a href="" class="local-mid-title">“与26所法国高” <span>正在售票</span></a>
							<p>11月2日 周六 - 11月3日 周日朝阳区天辰东路7号 北京国..</p>
							<p>266人关注</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="right">
				<h2 class="title right-title">
					活动标签 · · · · · ·
				</h2>
				<ul class="local-right-ul">
				<li>
					<a href="" class="right-ul-first">音乐»</a>
					<p>
						<a href="">小型现场</a>
						<a href="">音乐会</a>
						<a href="">演唱会</a>
						<a href="">音乐节</a>
					</p>
				</li>
				<li>
					<a href="" class="right-ul-first">戏剧»</a>
					<p>
						<a href="">话剧</a>
						<a href="">音乐剧</a>
						<a href="">舞剧</a>
						<a href="">歌剧</a>
						<a href="">戏曲</a>
						<a href="">其他</a>
					</p>
				</li>
				<li>
					<a href="" class="right-ul-first">聚会»</a>
					<p>
						<a href="">生活</a>
						<a href="">集市</a>
						<a href="">摄影</a>
						<a href="">外语</a>
						<a href="">桌游</a>
						<a href="">夜店</a>
						<a href="">交友</a>
						<a href="">美食</a>
						<a href="">派对</a>
					</p>
				</li>
				<li>
					<a href="" class="right-ul-first">电影»</a>
					<p>
						<a href="">主题放映</a>
						<a href="">影展</a>
						<a href="">影院活动</a>
					</p>
				</li>
					<li>
						<a href="" class="right-ul-first">其他»</a>
						<p>
							<a href="">讲座</a>
							<a href="">展览</a>
							<a href="">运动</a>
							<a href="">旅行</a>
							<a href="">公益</a>
						</p>
					</li>
			</ul>
			</div>
		</div>
	</div>
	<!-- 同城区域结束 -->

	<!-- 网页底部 -->
	<div id="hd-foot">
		<div class="foot-left">
			<p> © 2005－2017 douban.com, all rights reserved 北京豆网科技有限公司 </p>
			<p><a href="">京ICP证XXXXXX号</a>京ICP备XXXXXXX号 网络视听许可证<a href="">XXXXXXXXXX</a>号 </p>
			<p>京网文XXXXXXXXXXX号 <img src="./images/biaoshi.gif" alt="" />京公网安备XXXXXXXX  新出网证(京)字XXXX号</p>
			<p>违法和不良信息举报电话：4008353331   jubao@douban.com</p>
			<p><img style="width: 15px;height: 13px;" src="./images/jubao.png" alt="" /><a href="">中国互联网举报中心</a>
				电话：12377 <a href="">《食品流通许可证》许可证：XXXXXXXXXX</a>
			</p>
			<p><a href="">新出发京批字第直XXXXXX号</a></p>
		</div>
		<div class="foot-right">
			<a href="">关于豆瓣</a><span>·</span>
			<a href="">在豆瓣工作</a><span>·</span>
			<a href="">联系我们</a><span>·</span>
			<a href="">免责声明</a><span>·</span>
			<a href="">帮助中心</a><span>·</span>
			<a href="">移动应用</a><span>·</span>
			<a href="">豆瓣广告</a>
			<a href=""><img src="images/jubao.jpg"alt=""></a>
		</div>
	</div>
	<!-- 网页底部结束 -->
</body>
</html>

